<template>
    <div>
        <div class="topics">
            <!-- <el-main style="overflow: hidden;"> -->
                <div class="topcolumnbox">
                    <img src="@/assets/images/进站必看.jpg" alt="">
                    <img src="@/assets/images/每日精选.jpg" alt="">
                    <img src="@/assets/images/等你来答.jpg" alt="">
                </div>
                <ul class="topiclist">
                    <li v-for="(o, i) in topics" :key="i" class="topicli" >
                        <!-- 从链接中提取新闻的 id，并将其作为属性传递给 NewsDetail 组件 -->
                        <router-link :to="'/newsDetail' + o.id" style="color: #fff;">
                            <div class="topic-item">
                                <div class="top3-icon">
                                    {{i + 1}}
                                </div>
                                <div class="topic-text">
                                    <p>{{o.title}}</p>
                                    <span>{{o.heat}}&nbsp;热度</span>
                                </div>
                                <img :src="require('../../../../server/public/images/community/topics/' + o.titleImg)" alt="">
                            </div>
                        </router-link>
                    </li>
                </ul>
            <!-- </el-main> -->
        </div>
    </div>
</template>

<script>
import { FormItem } from 'element-ui';

export default {
    name: 'WorkspaceJsonCommunityTopics',

    data() {
        return {
            topics: [
                {
                    id: 1, title: '测试测试1测试测试1测试测试1测试测试1测试测试1测试测试1测试测试1测试测试1测试测试1测试测试1', 
                    titleImg: '话题1.jpg',heat: 12345,
                    content: '',
                },
                {id: 2, title: '测试测试2', titleImg: '话题2.jpg',heat: 11112,
                    content: '',
                },
                {
                    id: 3, title: '测试测试3', titleImg: '话题2.jpg',heat: 11112, 
                    content: '',
                },
                {
                    id: 4, title: '测试测试4', titleImg: '话题2.jpg',heat: 11112,
                    content: '',
                },
                {
                    id: 5, title: '测试测试5', titleImg: '话题2.jpg',heat: 11112,
                    content: '',
                },
                {
                    id: 6, title: '测试测试6', titleImg: '话题2.jpg',heat: 11112,
                    content: '',
                },
                {
                    id: 7, title: '测试测试7', titleImg: '话题2.jpg',heat: 11112,
                    content: '',
                },
                {
                    id: 4, title: '测试测试4', titleImg: '话题2.jpg',heat: 11112,
                    content: '',
                },
                {
                    id: 8, title: '测试测试8', titleImg: '话题2.jpg',heat: 11112,
                    content: '',
                },
                {
                    id: 9, title: '测试测试9', titleImg: '话题2.jpg',heat: 11112,
                    content: '',
                },
                {
                    id: 10, title: '测试测试10', titleImg: '话题2.jpg',heat: 11112,
                    content: '',
                },
                {
                    id: 11, title: '测试测试11', titleImg: '话题2.jpg',heat: 11112,
                    content: '',
                },
            ]
        };
    },

    mounted() {
        
    },

    methods: {
        // 跳转详情页面
        // goNewsDetail() {
        //     this.$router.push('/newsDetail')
        // }
    },
};
</script>

<style scoped>

</style>